- 1 -
相同元素优化
页面中相同元素可以直接放在舞台下面,不再单独放在每一个页面中。比如统一的背景、整个H5统一的背景音乐。
- 2 -
首页的优化
首页放的内容尽量少些,在舞台下调整预加载页面数,减少整个案例的加载时间。在首页显示过程中,加载后面页面数。
- 3 -
资源使用优化
工具占用的资源从小到大排列的顺序是:页面 < 面板 < 动效 < 时间轴 < 滑动时间轴 ,所以为了节省资源,优化案例,能用前者的情况下就不用后者。
- 4 -
图片放置位置优化
图片资源太大的情况下,可以在案例开始前,添加加载图,把所有素材放在舞台下,在加载图播放时,一次性加载完所有素材资源,放弃最初的加载速度,提高浏览体验。当所有素材都已经加载完成之后,我们只需要通过控制图片的置顶或者置底来实现我们需要的效果。
- 5 -
图片大小优化
减少图片大小的方法——素材尽量采用单一色彩的绘图方式完成。例如:
上面三张图长宽的像素都相同,第一张大小为9kb,第二张53kb,第三张是87kb。对于H5来说,流畅度往往比画面的精细程度更加重要。
- 6 -
素材优化
1.图片优化:根据需求设计相应素材大小,避免造成图片质量剩余。iH5平台一般通用案例图片宽高为 640 * 1040 px
2.图片需要压缩:图片质量越小,加载越高效。推荐在线压缩网站: tinypng.com
3.合并图片:把单独的元件合并到背景图片,也可以把相同的元件合并成一张图片。
4.动态图的优化:在不影响动态图整体效果的前提下,通过修改尺寸、质量、帧数等进行优化。
5.音乐的优化:音乐的优化可以使用格式工厂这类软件,对音乐进行裁剪和压缩。
6.图形工具的使用:在需要使用单纯色做背景或者其它的情况下,可以利用图形工具里面的背景色属性或者舞台与页面的背景属性。
- 7 -
制作方法优化
1.用动效取代时间轴
大家在制作动画效果时,优先选择使用动效,如果动效没有适合的效果,再选择时间轴。
2.时间轴优化
能合并的时间尽量合并,不需要显示的元素可以通过调整透明度来使其隐藏;
在不影响动画效果的情况下,不同轨迹上的关键帧可以略微错开一些;
注意时间轴时长的合理分配,避免同一时间运行过多关键帧;
3.画布优化
将时间轴或滑动时间轴放在画布下,动画部分放在画布中,触发动画效果的部分放在画布外,通过事件控制动画的调度执行;
当序列帧非常多时,可以用放在画布下的图片序列控件来实现,记得设置预加载(“预加载完成”和“全部加载完成”事件)
- 8 -
逻辑优化
1.预加载优化
如果设定的与加载页面数过多,会影响案例打开的速度,可以设置在第一页显示的时候,更改舞台的预加载页数实现后面页数的加载,优化案例体验;
测试类案例,如果是通过点击翻页的,可以把测试结果放在第二页上面。
2.图片显示逻辑优化
如果图片初始显示为no或者在对象树上去掉图片的勾选,图片是不会预加载的。如果担心大图加载慢影响事件的触发,可以在舞台下面添加事件“初始化完成→隐藏图片”。
3.顺序优化
同一时间触发的动作越少越好,可适当用先后顺序触发,如“时间轴为N时触发某个事件”;
动效的执行最好使用事件控制,避免多个动效自动播放,因为动效即便是设置了延时也是同一时间触发的。
通过时间轴播放结束的事件,开始执行其他动作,如动效开始播放、时间轴开始播放等;
4.事件优化
巧妙利用“隐藏同层控件”事件减少事件的数量;
5.控制计数器的数量
当有N个结果需要显示时,可以使用“计数器范围”属性来实现,或者添加数据库事件,一个事件启用计数器下所有事件;
6.数据库的应用优化
对象树下有数据库的,可以直接限制数据库的提交次数;无需后台记录结果的,可以用数据库整数变量限制投票或者点赞次数;如果数量很大,可以分页面来显示。
无需前端实时刷新数据库时,比如排名、点赞数,可以避免时间轴循环播放而重复输出数据或者重复赋值,改用通过按钮点击来输出实时数据。
当有多组数据输出时,可以通过禁用不需要执行的输出事件来减少输出运算。
7.妙用父对象
直接控制父对象要优于逐个控制父对象下的子对象。例如运算方式中需要变换目标位置的案例,可以把需要变换的元素放在同一父对象下,直接变换父对象目标位置,借助父对象减少运算;
如果用到碰撞,可在父对象设置碰撞,减少碰撞事件的运算,而且把碰撞加在画布下会流畅很多;
8.运算优化
用最简式运算方法,例如(700-200)* $a 简化成 500 * $a;
手机版
电脑版